<script setup>
// 引入编辑器样式
import '@wangeditor/editor/dist/css/style.css';
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
import {onBeforeUnmount, ref, shallowRef} from "vue";
import $axios from "../../util/request.js";
import axios from "axios";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const valueHtml = ref('');
// 工具栏模式，取值两个：default | simple
// default ：默认模式
// simple ：简单模式
const mode = ref('default');

/**
 * 工具栏配置
 */
const toolbarConfig = ref({});

/**
 * 编辑器配置
 */
const editorConfig4 = ref({
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      customUpload: async (file, insertFn) => {
        const formData = new FormData(); // 创建 FormData 对象
        formData.append("file", file); // 添加文件到 FormData
        // 上传图片到服务器
        axios.create({
          baseURL: 'http://localhost:8888', // 设置基础的 API 地址
          timeout: 5000 // 设置超时时间
        }).post('/api/v1/upload/image/avatar2', formData).then(res => {
          console.log('上传成功:', res);
          // 回调插入图片的方法
          insertFn(res.data?.data?.url, '图片', res.data?.data?.url);
        }).catch(err => {
          console.error('上传失败:', err);
        });
      }
    }
  }
});
/**
 * 编辑器配置
 */
const editorConfig3 = ref({
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 指定后端的接口地址
      server: '/api/v1/upload/image/avatar2',
      // 指定上传的字段名
      fieldName: 'file'
    }
  }
});
/**
 * 编辑器配置
 */
const editorConfig = ref({
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 指定上传图片的大小，小于这个值，则采用base64保存
      base64LimitSize: 5 * 1024 * 1024, // 5M
    }
  }
});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) {
    return;
  }
  editor.destroy();
});
// 编辑器创建完成
const handleCreated = (editor) => {
  editorRef.value = editor;
};
</script>

<template>
  <div class="v-wangEditor-container">
    <Toolbar style="border-bottom: 1px solid #ccc"
             :editor="editorRef"
             :defaultConfig="toolbarConfig"
             :mode="mode"/>
    <Editor v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            style="height: 100%;overflow-y: auto"/>
  </div>
</template>

<style scoped>
.v-wangEditor-container {
  width: 100%;
  height: 100%;
  background-color: #101010;
  overflow: hidden;
  border: 2px solid red;
}
</style>